<template>
  <div class="product-list-container">
    <van-nav-bar
        title="浏览足迹"
        left-arrow
        @click-left="onClickLeft"
    />
    <ul class="product-list">
      <li v-for="product in products" :key="product.id" class="product-item">
        <img :src="product.image" alt="Product Image" class="product-image">
        <div class="product-details">
          <h3>{{product.name}}</h3>
          <p>{{product.description}}</p>
          <p class="price">原价: <del>{{product.originalPrice}}</del> 现价: {{product.currentPrice}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'ProductList',
  data() {
    return {
      products: []
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/wode')
    }
  },
  mounted() {
    // 页面加载时从后端获取数据
    axios.get('http://1.94.221.254:9999/leaders/api/products/getProducts')
        .then(response => {
          this.products = response.data
        })
        .catch(error => {
          console.error('Error fetching data:', error)
        })
  }
}
</script>

<style scoped>
.browse-history {
            width: 100%;
            background-color: #fff;
          }
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.title {
  font-size: 18px;
  font-weight: bold;
}
.edit {
  color: #007AFF;
  cursor: pointer;
}
.product-list {
             padding: 10px;
           }
.product-item {
             display: flex;
             margin-bottom: 10px;
             border: 1px solid #ccc;
             border-radius: 5px;
             padding: 10px;
           }
.product-image {
             width: 100px;
             height: 100px;
             object-fit: cover;
             margin-right: 10px;
           }
.product-details {
             display: flex;
             flex-direction: column;
           }
.product-name {
             font-size: 16px;
             font-weight: bold;
             margin-bottom: 5px;
           }
.product-desc {
             font-size: 14px;
             color: #666;
             margin-bottom: 5px;
           }
.product-price {
             font-size: 14px;
             color: red;
           }
</style>
